<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
    <script>
        function takeVideo() {
            setupWebViewJavascriptBridge(function (bridge) {
                bridge.callHandler('takeVideo', { 'key': 'value' }, function responseCallback(responseData) {
                    console.log("JS received response:", responseData)
                })
            })
        }
        function scanqr() {
            setupWebViewJavascriptBridge(function (bridge) {
                bridge.callHandler('scan', { 'key': 'value' }, function responseCallback(responseData) {
                    alert("JS received response:", responseData)
                })
            })
        }
        function nfcReader() {
            setupWebViewJavascriptBridge(function (bridge) {
                bridge.callHandler('nfcStartReader', {
                    'isOnlyReadOnce': true
                    , 'alertMessage': "已准备好读取标签信息"
                    , 'successMessage': "标签信息读取成功"
                }, function responseCallback(responseData) {
                    console.log(responseData)
                })
            })
        }
        function nfcWriter() {
            setupWebViewJavascriptBridge(function (bridge) {
                var input = document.getElementById("nfcWri")
                var messages = [input.value]
                bridge.callHandler('nfcStartWriter', {
                    'messages': messages
                    , 'alertMessage': "将你的iPhone贴近一张可写的NFC卡片，即可写入数据"
                    , 'successMessage': "标签信息写入成功"
                }, function responseCallback(responseData) {
                    console.log(responseData)
                })
            })
        }
        function nfcStop() {
            setupWebViewJavascriptBridge(function (bridge) {
                bridge.callHandler('nfcStop', {
                    
                }, function responseCallback(responseData) {
                    console.log(responseData)
                })
            })
        }

        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
    </script>
</head>

<body>
    <div style="text-align: center;">
        <div style="margin-top: 60px;">
            <button onclick="takeVideo()" type="button">视频拍摄</button>
        </div>
        <div style="margin-top: 60px;">
            <button onclick="scanqr()" type="button">扫一扫</button>
        </div>
        <div style="margin-top: 60px;">
            <button onclick="nfcReader()" type="button">nfc读卡</button>
        </div>
        <div style="margin-top: 60px;">
            写入卡片:
            <br>
            <input id="nfcWri" type="text" placeholder="请输入内容">
        </div>
        <div style="margin-top: 30px;">
            <button onclick="nfcWriter()" type="button">nfc写入</button>
        </div>
    </div>
</body>

</html>
